<template>
  <div>
    <el-form-item label="企业名称">
      <el-input v-model="value.corpName" :disabled="disabled" class="input" placeholder="请输入企业名称" @change="handleChange" />
    </el-form-item>
    <el-form-item label="统一社会信用代码">
      <el-input v-model="value.certNo" :disabled="disabled" class="input" placeholder="请输入统一社会信用代码" @change="handleChange" />
    </el-form-item>
    <el-form-item label="注册地址">
      <el-input v-model="value.corpAddress" :disabled="disabled" class="input" placeholder="请输入注册地址" @change="handleChange" />
    </el-form-item>
    <el-form-item label="行政区域">
      <region-selects v-model="region" :town="true" separator="-" :disabled="disabled" class="input" @change="handleRegionChange" />
    </el-form-item>
    <el-form-item label="企业规模">
      <el-select v-model="value.corpScale" :disabled="disabled" placeholder="请选择" class="input" @change="handleChange">
        <el-option
          v-for="dict in dict.type.sec_corp_scale"
          :key="dict.value"
          :label="dict.label"
          :value="dict.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="行业类别">
      <el-select
        v-model="businessType"
        class="input"
        multiple
        filterable
        remote
        reserve-keyword
        placeholder="请输入关键词"
        style="width: 400px"
        :disabled="disabled"
        :remote-method="remoteMethod"
        :loading="loading"
        @change="handleChange"
      >
        <el-option-group
          v-for="(val, key) in industryData"
          :key="key"
          :label="key"
        >
          <el-option
            v-for="item in val"
            :key="item.id"
            :label="item.value"
            :value="item.value"
          />
        </el-option-group>
      </el-select>
    </el-form-item>
  </div>
</template>
<script>
import { searchIndustry } from '@/api/task/task'

export default {
  name: 'SecBasic',
  dicts: ['sec_corp_scale'],
  props: {
    disabled: Boolean,
    value: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      loading: false,
      region: {},
      businessType: [],
      industryData: {}
    }
  },
  watch: {
    value: {
      immediate: true,
      handler: function(val) {
        if (val.adminArea) {
          const [province, city, area, town] = val.adminArea.split('-')
          this.region = {
            province: province ? province.split(' ')[1] : null,
            city: city ? city.split(' ')[1] : null,
            area: area ? area.split(' ')[1] : null,
            town: town ? town.split(' ')[1] : null
          }
        }
        if (val.businessType) {
          this.businessType = val.businessType.split(',')
        }
      }
    }
  },
  methods: {
    handleChange() {
      const data = {
        ...this.value
      }
      if (this.businessType.length > 0) {
        data.businessType = this.businessType.join(',')
      }
      this.$emit('input', data)
      this.$emit('change', data)
    },
    handleRegionChange(e) {
      if (e.town) {
        this.value.adminArea = [`${e.province.value} ${e.province.key}`, `${e.city.value} ${e.city.key}`, `${e.area.value} ${e.area.key}`, `${e.town.value} ${e.town.key}`].join('-')
      } else if (e.area) {
        this.value.adminArea = [`${e.province.value} ${e.province.key}`, `${e.city.value} ${e.city.key}`, `${e.area.value} ${e.area.key}`].join('-')
      } else if (e.city) {
        this.value.adminArea = [`${e.province.value} ${e.province.key}`, `${e.city.value} ${e.city.key}`].join('-')
      } else if (e.province) {
        this.value.adminArea = [`${e.province.value} ${e.province.key}`].join('-')
      } else {
        this.value.adminArea = null
      }
      this.handleChange()
    },
    async remoteMethod(query) {
      if (query !== '') {
        this.loading = true
        const params = {
          pageNum: 1, pageSize: 1000, keywords: query
        }
        const { data } = await searchIndustry(params)
        this.loading = false
        const group = {}
        data.records.forEach(item => {
          group[item.categoryIndustryId] = group[item.categoryIndustryId] || []
          group[item.categoryIndustryId].push({
            ...item,
            value: `${item.classCode}(${item.smallClassName})`
          })
        })
        this.industryData = group
      } else {
        this.industryData = {}
      }
    }
  }
}
</script>
